<template>
    <el-container class="min-h-screen bg-cover" :style="{ backgroundImage: `url('${background}')` }">
        <div class="order">
            <div class="group_btn">
                订单详情页
            </div>
            <div id="aaa">订单编号: {{orderitems[0].oiOrderid}}</div>
            <el-table
                    :data="orderitems"
                    style="width: 100%"
            >

                <el-table-column label="序号"
                                 width="50"
                                 align="center">
                    <template scope="scope">
                        <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="oiSpotname" label="景点名称" width="300" align="center"></el-table-column>
                <el-table-column prop="oiImg" label="景点图片" width="200" align="center">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.oiImg" width="40" height="40" class="head_pic"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="oiSpottype" label="购票类型" width="180" align="center"></el-table-column>
                <el-table-column prop="oiSpotprice" label="景点单价" width="100" align="center"></el-table-column>
                <el-table-column prop="oiNum" label="购票数量" width="100" align="center">
                </el-table-column>
                <el-table-column prop="oiTotal" label="小计" width="250" align="center"></el-table-column>
                <el-table-column label="评论状态" align="center">>
                    <template slot-scope="scope">
                        <el-button type="danger"  v-show="scope.row.oiStatus==0" disabled="true">未支付</el-button>
                        <el-button type="success" @click="addDialog(scope.$index)" v-show="scope.row.oiStatus==1">添加</el-button>

                        <el-popover

                                placement="top-start"
                                title="评论"
                                width="200"
                                trigger="hover"
                                >
                            <el-form>
                                <el-form-item label="等级评价" :label-width="formLabelWidth">
                                    <br>
                                    <el-rate
                                            v-model="Comment.comtScore"
                                            disabled
                                            show-score
                                            text-color="#ff9900"
                                            score-template="{value}">

                                    </el-rate>
                                </el-form-item>
                                <el-form-item   label="评价详情" :label-width="formLabelWidth">
                                    <el-input v-model="Comment.comtInfo" autocomplete="off" :disabled="true"></el-input>
                                </el-form-item>
                            </el-form>
                            <el-button slot="reference"  v-show="scope.row.oiStatus==2" @mouseenter.native=" getComment(scope.row.oiId)" >查看评论</el-button>

                        </el-popover>

                    </template>
                </el-table-column>
            </el-table>
            <div id="bbb">共计：{{sumPrice}} 元</div>
        </div>
        <!-- 添加编辑的内容 -->
        <el-dialog title="添加评论" :visible.sync="addIsDialog" class="addDialog">
            <el-form>
                <el-form-item label="等级评价" :label-width="formLabelWidth">
                    <br>
                    <el-rate
                            v-model="Comment.comtScore"
                            show-text>
                    </el-rate>
                </el-form-item>
                <el-form-item label="评价详情" :label-width="formLabelWidth">
                    <el-input v-model="Comment.comtInfo" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addIsDialog = false">取 消</el-button>
                <el-button type="primary" @click="addSureBtn">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>

</template>


<script>
    import orderlist from '@/api/orderlist'

    export default {
        data() {
            return {
                orderitems: [],
                order: "",
                total: 1000, // 默认数据总数
                pagesize: 10,//每页的数据条数 - 当前显示数据条数
                currentPage: 1,//默认开始页面 - 当前页
                addIsDialog: false,
                Comment: {
                    comtInfo: "",
                    comtScore: 0.0,
                    comtOiid: 0,
                    comtUserid: ""
                },
                formLabelWidth: "200",
                oiidIndex: 0,
                background: require('@/assets/backgroud/backgroud1.jpg'),


            }
        },
        created() {
            //-- 生命周期方法，页面渲染之前执行。
            this.getOrderList()


        },
        methods: {
            getOrderList() {
                this.order = this.$route.params.index
               /* console.log(this.order)*/
                orderlist.list(this.order).then(response => {
                    console.log(4444444444)
                    this.orderitems = response.data.data.orderitems
                    console.log(this.orderitems )
                    console.log(55555555555)




                })
            },
            getComment(index){
                console.log("hover-------------")
                console.log(index)
                this.Comment.comtScore=0.0
                this.Comment.comtInfo=""
                this.Comment.comtOiid=index
                console.log(this.Comment.comtOiid)


                orderlist.comment(this.Comment).then(response => {
                    console.log(response);
                    this.Comment= response.data.data.Comment

                })
            },

            addDialog(index) {
                this.addIsDialog = true;

                this.oiidIndex=index





            },
            // 点击添加弹窗的确定按钮





            /*    private Integer comtId;

    private Integer comtSpotid;

    private String comtUserid;

    private String comtInfo;

    private Double comtScore;

    private String comtOiid;

    private Integer isDelete;

    private LocalDateTime gmtCreate;

    private LocalDateTime gmtModified;
*/
            addSureBtn() {
                this.addIsDialog = false;
                console.log(this.Comment)
                this.Comment.comtOiid=this.orderitems[this.oiidIndex].oiId
                console.log("wwwwwwwwwwwwww")
                console.log(this.Comment.comtOiid)
                this.Comment.comtUserid=JSON.parse(localStorage.getItem("Authorization")).userId
                // 初始化添加表单

                orderlist.comment(this.Comment).then(response => {

                    this.getOrderList()



                })

            }
        },



        computed: {
            sumPrice() {
                //用一个变量准备接住计算后的值
                let sumPrice = 0.0
                //遍历productList,拿到单价和数量
                for (let i in this.orderitems) {
                    //总价为每个商品的价格(price)*数量(num)   我这里*100是因为组件的单位
                    sumPrice += this.orderitems[i].oiTotal;
                }
                //最后return出去计算好的值,直接用就好了,不用在data中起总价的变量,不然会报错
                return sumPrice
            }
        },
        little(){
            let little= 0.0
            return little=this.orderitems
        }
    }
</script>

<style scoped>
    el-button {
        margin-left: 1000px;
    }

    .class1 {
        width: 100%;
        height: 800px;
        background: url("../assets/3.jpg") center;
        background-size: 100% auto;
        padding: 10px;
    }

    /*最外层透明*/
    /deep/ .el-table, /deep/ .el-table__expanded-cell {
        background-color: transparent;
    }

    /* 表格内背景颜色 */
    /deep/ .el-table th,
    /deep/ .el-table tr,
    /deep/ .el-table td {
        background-color: rgba(145, 192, 252, 0.15);
        color: white;
    }

    .order {
        margin: 50px auto;
        width: 1300px;
    }

    #button1 {
        margin-left: 1050px;
    }

    #button {
        margin-top: 10px;
    }

    .group_btn {
        text-align: center;
        color: white;
        font-size: 26px;
        margin-bottom: 20px;
    }

    .total_warpper {
        text-align: right;
        margin-top: 30px;
    }

    h3 {
        margin-top: 10px;
    }

    #aaa, #bbb {
        margin-top: 20px;
        color: white;
    }
</style>